import React, {
    PureComponent
} from 'react';

import {
    View,
    Text,
    Linking,
    StyleSheet
} from 'react-native';

import {
    getBundleId
} from 'react-native-device-info';

import {
    Actions
} from 'react-native-router-flux';

import {
    Tip,
    Press,
    Loading,
    Dialog,
    Layout,
    Arrow,
    Button
} from './../../components';

import connect from './../../utils/connect';

import * as Const from './../../const';
import * as Iap from './../../utils/iap';

import userAction from './../../state/actions/user';
import * as userTypes from './../../state/types/user';


interface Props {
    user:any,
    userActions: any
}

@connect([`user`],{
    userActions: userAction
})
class Setting extends PureComponent<Props> {
    get userState() {
        const {
            user
        } = this.props;
        return user;
    }

    get userActions() {
        const {
            userActions
        } = this.props;
        return userActions;
    }

    get userInfo():any {
        const {
            loginUser = {}
        }  = this.userState;
        return loginUser;
    }

    get isGuest() {
        const {
            isGuest = true
        } = this.userInfo;
        return isGuest;
    }

    get email() {
        const {
            email
        } = this.userInfo;
        return email;
    }

    private changeEmail = () => {
        Actions.push(`/setting/email`);
    }

    private _onContact = () => {
        Actions.push(`/setting/feedback`);
    }

    private _onBlockMember = () => {
        Actions.push(`/setting/blockMember`);
    }

    private _onNotifications = () => {
        Actions.push(`/setting/notifications`);
    }

    private _onAbout = () => {
        Actions.push(`/setting/about`);
    }

    private _toTerms = () => {
        Actions.push(`/terms`);
    }

    private _toPrivacy = () => {
        Actions.push(`/privacy`);
    }

    private changePassword = () => {
        Actions.push(`/setting/password`);
    }

    private openUpgrade = () => {
        Iap.buyMember()
    }

    private _onRateUs =() => {
        Linking.openURL(
            `https://play.google.com/store/apps/details?id=${getBundleId()}`
        )
    }

    private toDeleteAccount = () => {
        Actions.push(`/setting/deleteAccount`)
    }

    private _onSignOut = async () => {
        try {
            await Dialog.confirm({
                title: `Sign Out`,
                showClose:false,
                message: `Want to Sign out?`
            })
        }
        catch (e) {
            return false;
        }

        Loading.show();

        try {
            await this.userActions[
                userTypes.userLoginOut
            ]()
        }
        catch (e) {
            Tip.warm({
                message: e.message
            })
        }
        Loading.close();
    }

    render() {
        return (
            <Layout title="Settings" padding={false}>
               <View style={styles.container}>
                   {this.isGuest && (
                       <Arrow
                           title="Upgrade"
                           style={styles.itemRow}
                           onPress={this.openUpgrade}
                       />
                   )}
                   <Arrow
                       title="Email"
                       value={this.email}
                       style={styles.itemRow}
                       onPress={this.changeEmail}
                   />
                   <Arrow
                       title="Change password"
                       style={styles.itemRow}
                       onPress={this.changePassword}
                   />

                   <Arrow
                       style={styles.itemRow}
                       title="Notifications"
                       onPress={this._onNotifications}
                   />
                   <Arrow
                       style={styles.itemRow}
                       title="Blocked members"
                       onPress={this._onBlockMember}
                   />
                   <Arrow
                       title="Contact us"
                       style={styles.itemRow}
                       onPress={this._onContact}
                   />

                   <Arrow
                       title="About FWB"
                       style={styles.itemRow}
                       onPress={this._onAbout}
                   />
                   <Arrow
                       title="Privacy Policy"
                       style={styles.itemRow}
                       onPress={this._toPrivacy}
                   />
                   <Arrow
                       style={styles.itemRow}
                       title="Terms of Service"
                       onPress={this._toTerms}
                   />
                   <Arrow
                       title="Rate us"
                       style={styles.itemRow}
                       onPress={this._onRateUs}
                   />
                   <View style={styles.footer}>
                       <Button
                           title="Log out"
                           onPress={this._onSignOut}
                       />
                       <Press
                           style={styles.remove}
                           onPress={this.toDeleteAccount}
                       >
                           <Text style={styles.removeText}>
                               Remove account
                           </Text>
                       </Press>
                   </View>
               </View>
            </Layout>
        )
    }
}

export default Setting;

const styles = StyleSheet.create({
    container:{
        paddingTop:10,
    },
    itemRow:{
        paddingHorizontal:16
    },
    footer:{
        paddingVertical:48,
        paddingHorizontal:16
    },
    remove:{
        marginTop:6,
        paddingVertical:20,
        alignItems:`center`
    },
    removeText:{
        fontSize:16,
        color:Const.color
    }
}) as any;
